<script setup lang='ts'>
import { toRefs } from 'vue'

const props = defineProps<{
    data: any
}>()

const { data } = toRefs(props)
</script>

<template>
    <div class="flex items-center">
        <span v-for="(item, index) in data"
              :key="index"
              class="flex items-center"
        >
            <!-- 流程状态。1 完成（√），0 未完成（×）,可以是空，空就是没有标识 -->
            <template v-if="item.processStatus !== undefined ">
                <el-icon v-if="item.processStatus === 1"
                         color="#67c23a"
                >
                    <SuccessFilled />
                </el-icon>

                <el-icon v-else
                         color="red"
                >
                    <CircleCloseFilled />
                </el-icon>
            </template>

            <span class="ml-5">{{ item.processName }}</span>

            <span v-if="index < data.length - 1"
                  class="line mx-10"
            />
        </span>
    </div>
</template>

<style lang="less" scoped>
.line {
    display: inline-block;
    width: 50px;
    border-top: 1px dashed #000;
}
</style>
